<template>
  <div class="content-block">
    <h4>{{ t('settings.qrCodeSignTitle') }}</h4>
    <div v-if="qrCodeData">
      <QRCode :value="qrCodeData" :size="120" :level="'H'" />
    </div>
    <div v-else class="qrcode-preview"></div>
    <p class="small-text">{{ t('message.qrCodeGenerationNotice') }}</p>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
import QRCode from 'qrcode.vue';
/* global defineProps */
const { t } = useI18n();

const props = defineProps({
  qrCodeData: String
});

console.log(props.qrCodeData);
</script>

<style scoped>
.content-block {
  padding: 1.5vh 0;
}

.content-block h4 {
  margin: 0.5vh 0;
  font-size: 14px;
  font-weight: 500;
}

.small-text {
  font-size: 12px;
  color: #606266;
  margin: 0.3vh 0;
}

.qrcode-preview {
  width: 120px;
  height: 120px;
  background: #f0f2f5;
  border: 1px dashed #c0c4cc;
}
</style>